<template>
  <div>
    <h3>商家个人订单</h3>

    <br /><br /><br /><br />
    <el-table :data="OrderData" height="500" border style="width: 100%">
      <el-table-column
        prop="order_id"
        label="订单编号"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="payment_time" label="支付时间" align="center">
      </el-table-column>
      <el-table-column prop="status" label="支付状态" align="center">
        <template slot-scope="scope">
          <span>
            <p v-if="scope.row.status == '1'">未支付</p>
            <p v-else-if="scope.row.status == '5'">已支付</p>
            <p v-else-if="scope.row.status == '3'">已超时未支付</p>
            <p v-else-if="scope.row.status == '4'">待出餐</p>
            <p v-else-if="scope.row.status == '2'">待取餐</p>
            <p v-else-if="scope.row.status == '6'">待送餐</p>
            <p v-else-if="scope.row.status == '7'">已收餐待评论</p>
            <p v-else-if="scope.row.status == '8'">已完成</p>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="address_name" label="收货地址" align="center">
      </el-table-column>
      <el-table-column prop="price" label="总价" align="center">
      </el-table-column>
      <el-table-column prop="user_name" label="下单用户" align="center">
      </el-table-column>
      <el-table-column prop="" label="操作" align="center">
        <template #default="scope">
          <el-button @click="order_info(scope.row.id)">查询订单信息</el-button>
          <el-button
            @click="order_del(scope.row.id)"
            icon="el-icon-circle-close"
            circle
          ></el-button>
          <span>
            <p v-if="scope.row.status == '2'">
              <el-button
                @click="comment(scope.row.id)"
                icon="el-icon-chat-dot-round"
                circle
              >
              </el-button>
            </p>
            <p v-if="scope.row.status == '3'">
              <el-button
                @click="comment(scope.row.id)"
                icon="el-icon-chat-dot-round"
                circle
              >
              </el-button>
            </p>
            <p v-if="scope.row.status == '4'">
              <el-button
                @click="comment(scope.row.id)"
                icon="el-icon-chat-dot-round"
                circle
              >
              </el-button>
            </p>
            <p v-if="scope.row.status == '5'">
              <el-button
                @click="comment(scope.row.id)"
                icon="el-icon-chat-dot-round"
                circle
              >
              </el-button>
            </p>
            <p v-if="scope.row.status == '6'">
              <el-button
                @click="comment(scope.row.id)"
                icon="el-icon-chat-dot-round"
                circle
              >
              </el-button>
            </p>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="订单商品" :visible.sync="OrderInfoList">
      <el-table :data="OrderGoods">
        <el-table-column label="菜品图">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.dishes_list.dishes_img"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          property="dishes_list.dishes_name"
          label="菜品名字"
        ></el-table-column>
        <el-table-column
          property="dishes_list.dishes_price"
          label="菜品价格"
        ></el-table-column>
        <el-table-column property="num" label="商品数量"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  name: "",
  data() {
    return {
      OrderData: [],
      OrderInfoList: false,
      OrderGoods: [],
      mid: "",
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    // 获取用户信息
    Axios.get("http://127.0.0.1:8000/user/merchant/", {
      headers: { token: localStorage.getItem("token") || "" },
    }).then((res) => {
      this.mid = res.data.userinfo.id;
      console.log("获取信息>>", res);
    });
    // 获取订单信息
    Axios.get("http://127.0.0.1:8000/order/merch_order/", {
      headers: { token: localStorage.getItem("token") || "" },
    }).then((res) => {
      console.log("获取商家的订单>>", res);
      this.OrderData = res.data.order_list;
    });
  },

  methods: {
    // 获取订单详情
    order_info(id) {
      console.log("id", id);
      this.OrderInfoList = true;
      Axios.get("http://127.0.0.1:8000/order/order_goods/", {
        params: { oid: id },
        headers: { token: localStorage.getItem("token") || "" },
      }).then((res) => {
        // console.log("oid>>", id)
        console.log("获取订单中的商品的响应>>", res);
        this.OrderGoods = res.data.order_goods;
        // if (res.data.code == 200) {
        //   this.$notify({
        //     title: "成功",
        //     message: "获取订单商品成功",
        //     type: "success",
        //   });
        // } else {
        //   this.$notify.error({
        //     title: "错误",
        //     message: res.data.msg,
        //   });
        // }
      });
    },
    comment() {
      this.$router.push("/merchant_comment");
    },
    order_del(id) {
      Axios.delete("http://127.0.0.1:8000/order/orderinfo/" + id + "/").then(
        (res) => {
          console.log("删除订单的响应", res);
          if (res.status == 204) {
            this.$notify({
              title: "成功",
              message: "删除订单成功",
              type: "success",
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: res.statusText,
            });
          }
          Axios.get("http://127.0.0.1:8000/order/orderinfo/", {
            headers: { token: localStorage.getItem("token") || "" },
          }).then((res) => {
            // console.log("获取用户的订单>>", res);
            this.OrderData = res.data.order_list;
          });
        }
      );
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style>
* {
  margin: 0;
}
.tou {
  float: right;
}
</style>
